<template>
  <div class="box">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item  :to="{path:'/home'}">首页</el-breadcrumb-item>
      <el-breadcrumb-item v-for="(item,index) in breadList" :key="index" :to="{path:item.path}">{{item.title}}</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script>
export default {
  data(){
    return{
      breadList:[
        // {path:"/users",title:"用户管理"},
        // {path:"/users",title:"用户列表"},
      ]
    }
  },
  watch:{
    $route:{
      deep:true,
      immediate:true,
      handler(){
        let arr=this.$route.matched.map((item)=>{
          return {path:item.path,title:item.meta.title}
        })
        this.breadList=arr;
        console.log(this.$route.matched);
      }
    }
  }
};
</script>

<style lang="less" scoped>
.box{
  height: 100%;
  display: flex;
  align-items: center;
}
</style>